import React, { Component } from 'react'
import { addmenu,menulist } from "../interface/menu"

export default class Menu extends Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            path: "",
            msg: "",
            component: "",
            list:[]
        }
    }
  async  componentDidMount(){
        let res  =  await  menulist({});
        this.setState({
            list:res.data.list
        })

    }


    add = async () => {
        // alert(this.state.path+"和"+this.state.msg+"和"+this.state.component)
        let res = await addmenu({
            path: this.state.path,
            msg: this.state.msg,
            component: this.state.component
        })
        console.log(res);
    }

    render() {
        return (
            <div>
                <div>
                    菜单描述  <input value={this.state.msg} onChange={(e) => {
                        this.setState({
                            msg: e.target.value
                        })
                    }} />
                </div>
                <div>
                    路径  <input value={this.state.path} onChange={(e) => {
                        this.setState({
                            path: e.target.value
                        })
                    }} />
                </div>
                <div>
                    组件  <input value={this.state.component} onChange={(e) => {
                        this.setState({
                            component: e.target.value
                        })
                    }} />
                </div>
                <button onClick={this.add}>新增</button>
                <div className='table'>
                    <div className='tr'>
                        <div className='item'>路径</div>
                        <div className='item'>名称</div>
                        <div className='item'>组件</div>
                    </div>
                    {this.state.list.map((item:any)=>{
                        return  <div className='tr' key={item._id}>
                        <div className='item'>{item.path}</div>
                        <div className='item'>{item.msg}</div>
                        <div className='item'>{item.component}</div>
                    </div>
                    })}
                </div>

            </div>
        )
    }
}
